<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>求职干货 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/discover.css">
    <link rel="stylesheet" href="../css/article-list.css">
    <style>
        /* 求职干货列表页面特有样式 */
        .filter-section {
            padding: 12px 16px;
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 10;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .filter-tabs {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
            -ms-overflow-style: none;
            gap: 15px;
            padding-bottom: 5px;
        }
        
        .filter-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .filter-tabs .tab {
            padding: 6px 16px;
            border-radius: 16px;
            background-color: #f5f5f5;
            font-size: 14px;
            color: #666;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .filter-tabs .tab.active {
            background-color: #4e6ef2;
            color: #fff;
            font-weight: 500;
        }
        
        .tips-list {
            padding: 12px 16px;
        }
        
        .tips-item {
            margin-bottom: 20px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .tips-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        }
        
        .tips-img {
            height: 160px;
            position: relative;
            overflow: hidden;
        }
        
        .tips-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .tips-item:hover .tips-img img {
            transform: scale(1.05);
        }
        
        .tips-category {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 4px 10px;
            background-color: rgba(0, 0, 0, 0.6);
            color: #fff;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .tips-content {
            padding: 16px;
            background-color: #fff;
        }
        
        .tips-content h3 {
            font-size: 16px;
            margin: 0 0 8px;
            color: #333;
            font-weight: 600;
            line-height: 1.4;
        }
        
        .tips-content p {
            font-size: 14px;
            color: #666;
            margin: 0 0 15px;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .tips-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .author {
            display: flex;
            align-items: center;
        }
        
        .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 6px;
            object-fit: cover;
        }
        
        .author span {
            font-size: 13px;
            color: #666;
        }
        
        .likes {
            font-size: 13px;
            color: #ff5c5c;
        }
        
        .load-more-container {
            display: flex;
            justify-content: center;
            padding: 10px 0 30px;
        }
        
        .load-more-btn {
            padding: 10px 24px;
            background-color: #f5f7fa;
            border: none;
            border-radius: 20px;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .load-more-btn:hover {
            background-color: #e8edf5;
            color: #4e6ef2;
        }
        
        .load-more-btn i {
            font-size: 12px;
        }
        
        .spin {
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="header">
            <a href="discover.html" class="back-btn"><i class="bi bi-arrow-left"></i></a>
            <h1 class="page-title">求职干货</h1>
            <div class="user-info">
                <i class="bi bi-search"></i>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 筛选标签 -->
            <section class="filter-section">
                <div class="filter-tabs">
                    <div class="tab active">全部</div>
                    <div class="tab">简历优化</div>
                    <div class="tab">面试技巧</div>
                    <div class="tab">求职礼仪</div>
                    <div class="tab">薪资谈判</div>
                    <div class="tab">职业规划</div>
                    <div class="tab">行业洞察</div>
                </div>
            </section>

            <!-- 干货列表 -->
            <section class="content-list tips-list">
                <!-- 简历优化 -->
                <div class="tips-item" data-id="1" data-category="简历优化">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/4342496/pexels-photo-4342496.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="简历技巧">
                        <span class="tips-category">简历优化</span>
                    </div>
                    <div class="tips-content">
                        <h3>如何在简历中突出项目经历</h3>
                        <p>项目经历是HR最关注的部分，如何把经历写得既真实又吸引人？本文提供了实用的项目描述STAR法则和量化技巧。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/819530/pexels-photo-819530.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>简历优化师Tom</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 328</span>
                        </div>
                    </div>
                </div>

                <!-- 面试技巧 -->
                <div class="tips-item" data-id="2" data-category="面试技巧">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/5668858/pexels-photo-5668858.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="面试技巧">
                        <span class="tips-category">面试技巧</span>
                    </div>
                    <div class="tips-content">
                        <h3>大厂面试常见问题及应对策略</h3>
                        <p>整理了BAT等大厂的高频面试问题，以及回答技巧与注意事项，帮助你从容应对各类难题，赢得面试官青睐。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>资深面试官李明</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 456</span>
                        </div>
                    </div>
                </div>

                <!-- 求职礼仪 -->
                <div class="tips-item" data-id="3" data-category="求职礼仪">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="求职礼仪">
                        <span class="tips-category">求职礼仪</span>
                    </div>
                    <div class="tips-content">
                        <h3>职场礼仪须知</h3>
                        <p>面试与入职过程中的礼仪细节，让你赢在起跑线。从着装、握手到邮件沟通，细节决定成败的职场礼仪全攻略。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>职场礼仪专家王丽</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 287</span>
                        </div>
                    </div>
                </div>

                <!-- 薪资谈判 -->
                <div class="tips-item" data-id="4" data-category="薪资谈判">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/3943716/pexels-photo-3943716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="薪资谈判">
                        <span class="tips-category">薪资谈判</span>
                    </div>
                    <div class="tips-content">
                        <h3>薪资谈判技巧</h3>
                        <p>掌握薪资谈判的技巧，争取最优的offer待遇。了解行业薪资水平，找准谈判时机，用数据说话，不卑不亢表达价值。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>HR总监赵旭</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 345</span>
                        </div>
                    </div>
                </div>

                <!-- 简历优化 -->
                <div class="tips-item" data-id="5" data-category="简历优化">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/7256694/pexels-photo-7256694.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="简历技巧">
                        <span class="tips-category">简历优化</span>
                    </div>
                    <div class="tips-content">
                        <h3>应届生简历写作攻略</h3>
                        <p>没有实习经验的应届生如何打造一份吸引HR的简历？本文教你挖掘校园经历亮点，突出可迁移能力，从零开始制作专业简历。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/762020/pexels-photo-762020.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>校招负责人张洁</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 421</span>
                        </div>
                    </div>
                </div>

                <!-- 面试技巧 -->
                <div class="tips-item" data-id="6" data-category="面试技巧">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/4164347/pexels-photo-4164347.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="面试技巧">
                        <span class="tips-category">面试技巧</span>
                    </div>
                    <div class="tips-content">
                        <h3>技术面试如何展示你的技术深度</h3>
                        <p>在技术面试中既不卖弄也不怯场，如何准确展示你的技术实力？掌握问题分析方法，展示思考过程，不止于解决问题。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>技术总监陈志</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 389</span>
                        </div>
                    </div>
                </div>
                
                <!-- 职业规划 -->
                <div class="tips-item" data-id="7" data-category="职业规划">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/5989926/pexels-photo-5989926.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="职业规划">
                        <span class="tips-category">职业规划</span>
                    </div>
                    <div class="tips-content">
                        <h3>职场新人如何做好3-5年职业规划</h3>
                        <p>刚入职场的新人该如何规划自己的职业道路？如何设定阶段性目标并持续成长？避开职场发展误区，规划合理职业路径。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/1516680/pexels-photo-1516680.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>职业规划师吴青</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 356</span>
                        </div>
                    </div>
                </div>
                
                <!-- 行业洞察 -->
                <div class="tips-item" data-id="8" data-category="行业洞察">
                    <div class="tips-img">
                        <img src="https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="行业洞察">
                        <span class="tips-category">行业洞察</span>
                    </div>
                    <div class="tips-content">
                        <h3>2023年十大热门行业就业前景分析</h3>
                        <p>AI、芯片、新能源等热门行业的人才需求及薪资趋势深度解析，帮助你找准行业定位，把握就业机会。</p>
                        <div class="tips-meta">
                            <span class="author">
                                <img src="https://images.pexels.com/photos/1043474/pexels-photo-1043474.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar">
                                <span>行业分析师马元</span>
                            </span>
                            <span class="likes"><i class="bi bi-heart"></i> 467</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 加载更多 -->
            <div class="load-more-container">
                <button class="load-more-btn">加载更多 <i class="bi bi-chevron-down"></i></button>
            </div>
        </main>

        <!-- 底部导航栏 -->
        <footer class="tab-bar">
            <a href="../index.html" class="tab-item">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </a>
            <a href="discover.html" class="tab-item active">
                <i class="bi bi-compass-fill"></i>
                <span>发现</span>
            </a>
            <a href="agents.html" class="tab-item">
                <i class="bi bi-person-badge"></i>
                <span>经纪人</span>
            </a>
            <a href="profile.html" class="tab-item">
                <i class="bi bi-person"></i>
                <span>我的</span>
            </a>
        </footer>
    </div>

    <script src="../js/main.js"></script>
    <script src="../js/article-list.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化筛选标签
            initFilterTabs();
            
            // 初始化干货项点击
            initTipsItems();
            
            // 初始化加载更多
            initLoadMore();
        });
        
        // 初始化筛选标签
        function initFilterTabs() {
            const tabs = document.querySelectorAll('.filter-tabs .tab');
            
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有标签的active状态
                    tabs.forEach(t => t.classList.remove('active'));
                    
                    // 设置当前标签为active
                    this.classList.add('active');
                    
                    // 获取当前选中的分类
                    const category = this.textContent;
                    
                    // 筛选显示对应分类的干货项
                    filterTipsByCategory(category);
                });
            });
        }
        
        // 根据分类筛选干货项
        function filterTipsByCategory(category) {
            const tipsItems = document.querySelectorAll('.tips-item');
            
            tipsItems.forEach(item => {
                const itemCategory = item.getAttribute('data-category');
                
                if (category === '全部' || category === itemCategory) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        }
        
        // 初始化干货项点击
        function initTipsItems() {
            const tipsItems = document.querySelectorAll('.tips-item');
            
            tipsItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 获取干货项ID和分类
                    const tipsId = this.getAttribute('data-id');
                    const category = this.getAttribute('data-category');
                    
                    // 简历优化 -> resume_tips
                    // 面试技巧 -> interview_tips
                    let typeId = '';
                    if (category === '简历优化') {
                        typeId = 'resume_tips';
                    } else if (category === '面试技巧') {
                        typeId = 'interview_tips';
                    } else {
                        typeId = 'tips_' + tipsId;
                    }
                    
                    // 跳转到文章详情页
                    window.location.href = `article-details.html?id=${typeId}&type=tips`;
                });
            });
        }
        
        // 初始化加载更多
        function initLoadMore() {
            const loadMoreBtn = document.querySelector('.load-more-btn');
            
            if (loadMoreBtn) {
                loadMoreBtn.addEventListener('click', function() {
                    // 显示加载图标
                    const btnIcon = this.querySelector('i');
                    btnIcon.classList.remove('bi-arrow-down');
                    btnIcon.classList.add('bi-arrow-repeat', 'spin');
                    this.disabled = true;
                    
                    // 模拟加载更多数据
                    setTimeout(() => {
                        // 添加新的干货项
                        addMoreTipsItems();
                        
                        // 恢复按钮状态
                        btnIcon.classList.remove('bi-arrow-repeat', 'spin');
                        btnIcon.classList.add('bi-arrow-down');
                        this.disabled = false;
                        
                        // 如果已加载全部数据，隐藏加载更多按钮
                        if (document.querySelectorAll('.tips-item').length >= 12) {
                            this.parentElement.style.display = 'none';
                        }
                    }, 1500);
                });
            }
        }
        
        // 添加更多干货项
        function addMoreTipsItems() {
            // 这里模拟获取更多数据，实际项目中应该通过API获取
            const newItems = [
                {
                    id: 5,
                    category: '简历优化',
                    title: '应届生简历写作攻略',
                    desc: '零工作经验如何写一份令HR眼前一亮的简历？本文为应届毕业生提供从简历结构到内容填充的全套指南。',
                    image: 'https://images.pexels.com/photos/7256694/pexels-photo-7256694.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
                    author: '校招负责人张洁',
                    authorAvatar: 'https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
                    likes: 267
                },
                {
                    id: 6,
                    category: '职业规划',
                    title: '如何规划职业生涯的三个关键阶段',
                    desc: '职业生涯规划不是一成不变的，而是需要随着人生阶段的变化而调整。本文分析了职业发展的三个关键阶段及其规划要点。',
                    image: 'https://images.pexels.com/photos/3760529/pexels-photo-3760529.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
                    author: '职业规划师王方',
                    authorAvatar: 'https://images.pexels.com/photos/1181686/pexels-photo-1181686.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
                    likes: 183
                }
            ];
            
            const tipsList = document.querySelector('.tips-list');
            
            // 获取当前选中的分类
            const activeCategory = document.querySelector('.filter-tabs .tab.active').textContent;
            
            newItems.forEach(item => {
                // 如果当前筛选分类不是"全部"且与项目分类不一致，则不添加
                if (activeCategory !== '全部' && activeCategory !== item.category) {
                    return;
                }
                
                const itemHtml = `
                    <div class="tips-item" data-id="${item.id}" data-category="${item.category}">
                        <div class="tips-img">
                            <img src="${item.image}" alt="${item.title}">
                            <span class="tips-category">${item.category}</span>
                        </div>
                        <div class="tips-content">
                            <h3>${item.title}</h3>
                            <p>${item.desc}</p>
                            <div class="tips-meta">
                                <span class="author">
                                    <img src="${item.authorAvatar}" alt="作者头像" class="author-avatar">
                                    <span>${item.author}</span>
                                </span>
                                <span class="likes"><i class="bi bi-heart"></i> ${item.likes}</span>
                            </div>
                        </div>
                    </div>
                `;
                
                tipsList.insertAdjacentHTML('beforeend', itemHtml);
            });
            
            // 重新绑定点击事件
            initTipsItems();
        }
    </script>
</body>
</html> 